<template>
  <div style="text-align: left;">
    <template v-for="direction in directions" :key="direction.title">
      <el-submenu
        v-if="direction && direction.directions && direction.directions.length > 0"
        :index="direction.title"
      >
        <template #title>{{ direction.title }}</template>
        <DirectionMenuTree :directions="direction.directions"></DirectionMenuTree>
      </el-submenu>
      <el-menu-item v-else :index="direction.title">{{ direction.title }}</el-menu-item>
    </template>
  </div>
</template>

<script>
export default {
  name: 'DirectionsMenus',
  props: {
    directions: {
      type: Object,
      required: true,
    },
  },
  data() {
    return {};
  },
  mounted() {
    // console.log(this.directions);
  },
};
</script>

<style>
.el-menu {
  border-right: 0;
}
</style>
